<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo">
        <router-link to="/welcome" style="color: white; font-size: 18px">
          12306 控制台
        </router-link>
      </div>
      <div style="float: right; color: white;">
        <router-link to="/login" style="color: white;">
          欢迎使用控制台
        </router-link>
      </div>
      <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="/welcome">
          <router-link to="/welcome">
            <coffee-outlined /> &nbsp; 欢迎
          </router-link>
        </a-menu-item>
        <a-menu-item key="/about">
          <router-link to="/about">
            <coffee-outlined /> &nbsp; 关于
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
  </a-layout>
</template>
<script>
import {defineComponent, ref, watch} from 'vue';
import {useRouter} from "vue-router";

export default defineComponent({
  name: 'header-view',
  components: {
  },
  setup() {
    const router = useRouter();
    const selectedKeys = ref([]);

    watch(() => router.currentRoute.value.path, (newValue) => {
      selectedKeys.value = [];
      selectedKeys.value.push(newValue);
    }, {immediate: true});

    return {
      selectedKeys,
    };
  },
});
</script>
<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  margin: 16px 24px 16px 0;
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>